<script setup>
import PageContainer from '@/components/PageContainer.vue'
import ArticleManageSelect from '@/views/article/components/ArticleManageSelect.vue'
import { Edit, Delete } from '@element-plus/icons-vue'
import { getManageAPI, deleteArticleAPI } from '@/api/article'
import { ref, onMounted } from 'vue'
import { formatDate } from '@/utils/format'
import ArticlePagination from '@/views/article/components/ArticlePagination.vue'
import ArticleManageEdit from '@/views/article/components/ArticleManageEdit.vue'

// 抽屉组件
const drawerRef = ref()

// 加载效果
const loading = ref(false)

// 声名 文章管理列表 请求参数
const params = ref({
  pagenum: 1,
  pagesize: 5,
  cate_id: '',
  state: ''
})
const total = ref(0)
// 获取文章管理列表
const articleList = ref([])
const getArticleList = async () => {
  // 开启加载效果
  loading.value = true
  const { data } = await getManageAPI(params.value)
  articleList.value = data.data
  total.value = data.total
  // 关闭加载效果
  loading.value = false
}
onMounted(() => {
  getArticleList()
})

// 搜索
const onSearch = () => {
  params.value.pagenum = 1
  getArticleList()
}
// 重置
const onReset = () => {
  params.value = {
    pagenum: 1,
    pagesize: 5,
    cate_id: '',
    state: ''
  }
  getArticleList()
}

// 发布文章 按钮
const onPublish = () => {
  drawerRef.value.open({})
}

// 编辑
const onEdit = (row) => {
  drawerRef.value.open(row)
}
// 删除
const onDelete = async (row) => {
  // 提示用户是否删除
  await ElMessageBox.confirm('您确定要删除该文章？', '温馨提示', {
    type: 'warning',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  })
  await deleteArticleAPI(row.id)
  // 提示用户删除成功
  ElMessage.success('文章删除成功')
  // 重新拉取数据
  getArticleList()
}

// 子组件 传回来的 方法
const handlePublish = (msg) => {
  if (msg === 'add') {
    // 添加 渲染最后一页数据
    params.value.pagenum = Math.ceil(total.value + 1 / params.value.pagesize)
  }
  if (msg === 'edit') {
    // 编辑 渲染当前页数据
  }
  // 统一渲染
  getArticleList()
}
</script>

<template>
  <page-container title="文章管理">
    <!-- 右侧按钮 -->
    <template #extra>
      <el-button type="primary" @click="onPublish">发布文章</el-button>
    </template>
    <el-form inline>
      <el-form-item>
        <!-- 下拉框 select -->
        <article-manage-select v-model="params.cate_id"></article-manage-select>
      </el-form-item>
      <el-form-item>
        <el-select style="width: 240px" v-model="params.state">
          <el-option label="已发布" value="已发布"></el-option>
          <el-option label="草稿" value="草稿"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="info" @click="onReset">重置</el-button>
      </el-form-item>

      <!-- 表格 table -->
      <el-table :data="articleList" v-loading="loading">
        <el-table-column prop="title" label="文章标题">
          <template #default="{ row }">
            <el-link type="primary">{{ row.title }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="cate_name" label="分类"></el-table-column>
        <el-table-column label="发表时间">
          <template #default="{ row }">
            {{ formatDate(row.pub_date) }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态"></el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button
              type="primary"
              circle
              plain
              @click="onEdit(row)"
              :icon="Edit"
            ></el-button>
            <el-button
              type="danger"
              circle
              plain
              @click="onDelete(row)"
              :icon="Delete"
            ></el-button>
          </template>
        </el-table-column>

        <!-- 表格暂无数据 -->
        <template #empty>
          <el-empty description="暂无数据"></el-empty>
        </template>
      </el-table>

      <!-- 分页 pagination -->
      <article-pagination
        v-if="total"
        v-model:currentPage="params.pagenum"
        v-model:pageSize="params.pagesize"
        :total="total"
        @change="getArticleList"
        background
        style="margin-top: 40px; justify-content: flex-end"
      ></article-pagination>
    </el-form>

    <!-- 抽屉组件 drawer -->
    <article-manage-edit
      ref="drawerRef"
      @reFreshList="handlePublish"
    ></article-manage-edit>
  </page-container>
</template>
